import { CheckCard } from '@ant-design/pro-components';
import { Avatar } from 'antd';

const dataSource = [
  {
    title: '图像分类',
    avatar: (
      <Avatar
        size={32}
        shape="square"
        src="https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg"
      />
    ),
    description: '这是一段关于该算法的说明',
    value: 'A',
  },
  {
    title: '物体检测',
    avatar: (
      <Avatar
        size={32}
        shape="square"
        src="https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg"
      />
    ),
    description: '这是一段关于该算法的说明',
    value: 'B',
  },
  {
    title: 'OCR自定义',
    avatar: (
      <Avatar
        size={32}
        shape="square"
        src="https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg"
      />
    ),
    description: '这是一段关于该算法的说明',
    value: 'C',
  },
  {
    title: 'OCR',
    avatar: (
      <Avatar
        size={32}
        shape="square"
        src="https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg"
      />
    ),
    description: '这是一段关于该算法的说明',
    value: 'D',
  },
  {
    title: '视频分类',
    avatar: (
      <Avatar
        size={32}
        shape="square"
        src="https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg"
      />
    ),
    description: '这是一段关于该算法的说明',
    value: 'E',
  },
  {
    title: '关键点检测',
    avatar: (
      <Avatar
        size={32}
        shape="square"
        src="https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg"
      />
    ),
    description: '这是一段关于该算法的说明',
    value: 'F',
  },
];

export default () => (
  <>
    <div style={{ padding: 24, backgroundColor: '#f7f8fa' }}>
      <CheckCard.Group options={dataSource} />
    </div>

    <div
      style={{
        marginTop: '20px',
        padding: '20px',
        backgroundColor: '#f5f5f5',
        borderRadius: '6px',
      }}
    >
      <h4>CheckCard.Group Options 列表渲染说明：</h4>
      <ul>
        <li>
          <strong>options</strong>: 数据源数组，每个元素会被渲染为一个 CheckCard
        </li>
        <li>
          <strong>dataSource</strong>: 包含多个选项数据的数组
        </li>
      </ul>
      <h4>Option 对象属性：</h4>
      <ul>
        <li>
          <strong>title</strong>: 卡片标题，显示文本
        </li>
        <li>
          <strong>avatar</strong>: 卡片头像，可以是 React 节点
        </li>
        <li>
          <strong>description</strong>: 卡片描述信息
        </li>
        <li>
          <strong>value</strong>: 选项值，用于标识和表单绑定
        </li>
      </ul>
      <h4>Avatar 组件 Props：</h4>
      <ul>
        <li>
          <strong>size</strong>: 头像尺寸，数字值（像素）
        </li>
        <li>
          <strong>shape</strong>: 头像形状，'square' 表示方形
        </li>
        <li>
          <strong>src</strong>: 头像图片地址
        </li>
      </ul>
      <h4>列表渲染特点：</h4>
      <ul>
        <li>
          <strong>自动布局</strong>: 根据容器宽度自动排列卡片
        </li>
        <li>
          <strong>响应式</strong>: 在不同屏幕尺寸下自动调整布局
        </li>
        <li>
          <strong>统一样式</strong>: 所有卡片使用相同的样式配置
        </li>
        <li>
          <strong>批量操作</strong>: 支持批量选择和操作
        </li>
      </ul>
      <h4>使用场景：</h4>
      <ul>
        <li>
          <strong>算法选择</strong>: 如示例中的机器学习算法选择
        </li>
        <li>
          <strong>产品展示</strong>: 展示多个产品选项
        </li>
        <li>
          <strong>功能选择</strong>: 选择不同的功能模块
        </li>
        <li>
          <strong>配置选择</strong>: 选择不同的配置选项
        </li>
      </ul>
      <h4>最佳实践：</h4>
      <ul>
        <li>
          <strong>数据结构</strong>: 保持数据结构的统一性和一致性
        </li>
        <li>
          <strong>性能优化</strong>: 大量数据时考虑虚拟滚动
        </li>
        <li>
          <strong>用户体验</strong>: 提供清晰的视觉层次和交互反馈
        </li>
      </ul>
    </div>
  </>
);
